/*
 * @Description: 用户列表面板
 * @Author: Rfan
 * @Date: 2022-04-05 11:44:58
 * @LastEditTime: 2022-05-25 08:59:24
 */

import { useEffect, useState } from 'react';
import { Avatar, Card, Checkbox, List, Space } from 'antd';
import classNames from 'classnames/bind';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { useRoleContext } from '../contexts/RoleContext';
import type { IPageQuery } from '@/interfaces/global';

import styles from '../styles/roleListPane.module.scss';

const cx = classNames.bind(styles);

interface IRoleUserQuery extends IPageQuery {
  roleId: number;
}

const RoleListPane = () => {
  const {
    selectRoleId,
    userList,
    selectUserIds,
    getRoleUserList,
    changeSelectUserId,
    userTypeFilter
  } = useRoleContext();
  // 列表加载状态
  const [loading, setLoading] = useState(false);
  // 全部条目数
  const [total, setTotal] = useState(0);
  // 请求参数
  const [listQuery, setListQuery] = useState<IRoleUserQuery>({
    pageNo: 1,
    pageSize: 10,
    roleId: 0
  });

  /**
   * @description: 选中角色，请求参数变更，如切换页面。请求列表
   */
  useEffect(() => {
    if (parseInt(selectRoleId, 10)) {
      setListQuery((state: IRoleUserQuery) => {
        return {
          ...state,
          roleId: selectRoleId
        };
      });
    }
  }, [selectRoleId]);

  /**
   * @description: 选中角色，请求参数变更，如切换页面。请求列表
   */
  useEffect(() => {
    if (listQuery.roleId) {
      setLoading(true);
      getRoleUserList(listQuery)
        .then((res: any) => {
          setTotal(res?.total);
          console.log('userlist: ', userList);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description: 切换页码触发
   * @param {number} page 选中的页码
   * @param {number} pageSize 请求的条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state: any) => {
      return {
        ...state,
        pageNo: page,
        pageSize
      };
    });
  };

  const cardSelectChange = (evt: CheckboxChangeEvent, info: any) => {
    console.log({ evt, info });

    changeSelectUserId(evt.target.checked, info.id);
  };

  return (
    <div className={cx('role-list-pane')}>
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 1,
          md: 2,
          lg: 2,
          xl: 3,
          xxl: 4
        }}
        dataSource={userList}
        loading={loading}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
        renderItem={({ user, department, userRole }: any) => (
          <List.Item>
            <Card className={cx('card-item')}>
              <Space className={cx('item-space')} size="large">
                <Avatar shape="square" size={64} />
                <div className={cx('info')}>
                  <h6>
                    {user.realname}/{user.username}
                  </h6>
                  <p>{department?.deptName}</p>
                  <p className={cx('info__title')}>职务头衔：{userTypeFilter(user.userType)}</p>
                </div>
              </Space>
              <Checkbox
                className={cx('card__select')}
                checked={selectUserIds.indexOf(userRole.id) >= 0}
                onChange={(evt) => {
                  cardSelectChange(evt, userRole);
                }}
              />
            </Card>
          </List.Item>
        )}
      />
    </div>
  );
};

export default RoleListPane;
